import Layout from '../components/Layout';
import React from 'react';
import {useTags} from "../hooks/useTags";
import styled from 'styled-components';
import Icon from '../components/Icon';
import {Link} from 'react-router-dom'
import {Button} from 'components/Button'
import {Center} from 'components/Center'
import {Space} from 'components/Space'

function Tags() {
    const {tags, addTag} = useTags()
    const TagList = styled.ol`
      font-size: 16px;
      background: white;

      > li {
        //#e5e5e7
        &:hover {
          background: #e3f3fd;
        }

        border-bottom: 1px solid #e9f0ff;
        line-height: 20px;
        padding: 12px 16px 12px 16px;
        > a {
          padding: 12px 16px 12px 0;
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    `;


    return (
        <Layout>
            <TagList>
                {tags.map(tag =>
                    <li key={tag.id}>
                        {/*路由跳转*/}
                        <Link to={'/tags/'+ tag.id}>
                            <span className="oneLine">{tag.name}</span>
                            <Icon name="right"/>
                        </Link>
                    </li>
                )}
            </TagList>
            <Center>
                <Space/>
                <Space/>
                <Space/>
                <Button onClick={addTag}>新增标签</Button>
            </Center>
        </Layout>
    );
}

export default Tags;
